<template>
  <div style="width: 100%; height: 100%">
    <div style="width: 100%; height: 100%" ref="ech"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  //变量
  data() {
    return { Echarts: null };
  },
  //初始
  mounted() {
    this.$nextTick(() => {
      this.Echarts = echarts.init(this.$refs.ech, "macarons");
      this.getEchart();
      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    getData() {},
    getEchart() {
      const range = 75;
      var option = {
        title: [
          {
            text: "正确率",
            x: "center",
            top: "30%",
            textStyle: {
              color: "#8C8C8C",
              fontSize: 12,
            },
          },
          {
            text: "70%",
            x: "center",
            y: "50%",
            textStyle: {
              fontSize: 14,
              color: "#000",
            },
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return "正确率: " + params.value + "%";
          },
        },
        polar: {
          radius: ["80%", "100%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            // radius: ["89%", "99%"],
            roundCap: true,
            showBackground: true,
            data: [range],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: "#2DDF5C",
              },
            },
          },
        ],
      };
      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    },
  },
  //销毁
  beforeDestroy() {
    if (this.Echarts) {
      // 清除实例，释放资源
      this.Echarts.dispose();
      // 将实例设为null，避免潜在的内存泄漏
      this.Echarts = null;
    }
  },
};
</script>
<style scoped></style>
